<template>
    <div>
      <h2>双向数据绑定v-model</h2>
      <h3>小黑学习网</h3>
      <br>姓名：<input type="text" v-model="username"><br>
      <br>单身：<input type="checkbox" v-model="isSingle"><br>
      <br>性别:
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="2">女 <br>
      <br>所在城市:
      <!-- select 的 value 值，关联了选中的 option 的 value 值，在v-model绑定属性设置值则默认选择|刷新值 -->
      <select v-model="cityId"> 
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select><br>
      <br>自我描述：<textarea v-model="desc"></textarea>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        isSingle: false,
        desc: "",
        gender: "2", // 默认选择: 2 女
        cityId: '102', // 默认选择: 102 上海
      }
    }
  }
  </script>
  
  <style scoped>
  /* 你可以在这里添加你的样式 */
  </style >